<template>
  <div id="ChinaMap" ref="main" style="width: auto; height: 100%;">
    
  </div>
</template>

<script>
export default {
  name: 'ChinaMap',
  props: ['inputValue'], // 声明接收的props
  data () {
    return {
      searchText: '',
      chart: null,
      mapData:[],
    };
  },
  watch:{
    inputValue(newVal) {
      this.inputV(newVal);
  }

  },
  components: {
    
  },
  created() {
    
  },
  mounted() {
    this.showChina();
  
  },

  methods: {
    refresh(){
      this.inputV(this.inputValue);
    },
    inputV(newVal) {
    if (newVal) {
      this.searchText = newVal;
      this.showChina().then(() => {
        this.highlightProvince(newVal);
      }).catch(error => {
        console.error('Error in showChina or highlightProvince:', error);
      });
    }
  },
    async showChina() {
     // 地图数据的 URL
      const ROOT_PATH = 'https://geojson.cn/api/china/china.json';

      // 获取 DOM 元素
      const chartDom = this.$refs.main;
      if (!chartDom) {
        console.error('无法找到 DOM 元素：ref="main"');
        return;
      }

      // 初始化 ECharts 实例
      const myChart = this.$echarts.init(chartDom);
      this.chart = myChart;
      // 显示加载动画
      myChart.showLoading();

      try {
        // 使用 fetch API 获取地图数据
        const response = await fetch(ROOT_PATH);
        if (!response.ok) {
          throw new Error('地图数据加载失败');
        }
        const geoJson = await response.json();
        this.$echarts.registerMap('china', geoJson);

        // 设置 ECharts 选项
        const option = {
          series: [
            {
              type: 'map',
              mapType: 'china',
              roam: true,
              zoom: 1.2,
              center: [105, 35],
              label: {
                show: true,
                color: '#fff'
              },
              itemStyle: {
                areaColor: '#2b4a6e',
                borderColor: '#fff',
                shadowColor: 'rgba(0, 0, 0, 0.5)',
                shadowBlur: 10
              },
              emphasis: {
                itemStyle: {
                  areaColor: 'yellow'
                }
              },
              data:[                   
                    { "name": "北京", "code": "110000" },
                    { "name": "天津", "code": "120000" },
                    { "name": "河北", "code": "130000" },
                    { "name": "山西", "code": "140000" },
                    { "name": "内蒙古", "code": "150000" },
                    { "name": "辽宁", "code": "210000" },
                    { "name": "吉林", "code": "220000" },
                    { "name": "黑龙江", "code": "230000" },
                    { "name": "上海", "code": "310000" },
                    { "name": "江苏", "code": "320000" },
                    { "name": "浙江", "code": "330000" },
                    { "name": "安徽", "code": "340000" },
                    { "name": "福建", "code": "350000" },
                    { "name": "江西", "code": "360000" },
                    { "name": "山东", "code": "370000" },
                    { "name": "河南", "code": "410000" },
                    { "name": "湖北", "code": "420000" },
                    { "name": "湖南", "code": "430000" },
                    { "name": "广东", "code": "440000" },
                    { "name": "广西", "code": "450000" },
                    { "name": "海南", "code": "460000" },
                    { "name": "重庆", "code": "500000" },
                    { "name": "四川", "code": "510000" },
                    { "name": "贵州", "code": "520000" },
                    { "name": "云南", "code": "530000" },
                    { "name": "西藏", "code": "540000" },
                    { "name": "陕西", "code": "610000" },
                    { "name": "甘肃", "code": "620000" },
                    { "name": "青海", "code": "630000" },
                    { "name": "宁夏", "code": "640000" },
                    { "name": "新疆", "code": "650000" },
                    { "name": "香港", "code": "810000" },
                    { "name": "澳门", "code": "820000" },
                    { "name": "台湾", "code": "710000" }
              ]
            }
          ]
        };

        // 使用刚设置的配置项和数据显示图表
        myChart.setOption(option);
        myChart.hideLoading();
      } catch (error) {
        console.error('地图数据加载错误：', error);
        myChart.hideLoading();
      }
  },
  highlightProvince(newVal) {
     
     this.searchText=newVal;
     if (this.searchText) {
       // 先取消之前的高亮
       this.chart.dispatchAction({ type: 'downplay', seriesIndex: 0 });
       alert(this.searchText)
       // 再高亮当前输入的省份
       const regions = this.chart.getOption().series[0].data;
       console.log(regions)
       const target = regions.find((item) => item.code == this.searchText);
       
       if (target) {
         this.chart.dispatchAction({
           type: 'highlight',
           seriesIndex: 0,
           name: target.name
         });
         this.$emit('province', target);
       } else {
         alert('省份名称输入错误或不存在');
       }
       
       // 清空输入框
       this.searchText = '';
     }
   }
  
  },
};
</script>

<style lang='scss' scoped>

</style>